<template>
	<div id="index">
		<el-row type="flex" class="row-bg" justify="space-between">
			<el-col :span="4">
				<div class="grid-content flex">
					<!-- <img src="../../assets/02.jpg"  height="42" class="user-icon"> -->
					<div class="block"><el-avatar :size="42" :src="circleUrl"></el-avatar></div>
				</div>
			</el-col>
			<el-col :span="14">
				<div class="grid-content flex">
					<div class="search">
						<i class="el-icon-search icon-search"></i>
					</div>
				</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content flex">
					<el-badge :value="1" class="item">
						<i class="el-icon-message icon-message"></i>
						<!-- <el-button size="small">评论</el-button> -->
					</el-badge>
				</div>
			</el-col>
			<el-col :span="3">
				<div class="grid-content flex">
					<i class="el-icon-moon-night icon-moon"></i>
				</div>
			</el-col>
		</el-row>
		<el-tabs v-model="activeName" @tab-click="handleClick" class="index-tabs">
			<el-tab-pane label="动漫" name="first"><Animation></Animation></el-tab-pane>
			<el-tab-pane label="漫画" name="second"><Comic></Comic></el-tab-pane>
			<el-tab-pane label="书籍" name="third">书籍</el-tab-pane>
			<el-tab-pane label="游戏" name="fourth">游戏</el-tab-pane>
			<el-tab-pane label="音乐" name="five">音乐</el-tab-pane>
			<el-tab-pane label="排行榜" name="six">排行榜</el-tab-pane>
		</el-tabs>
		<!-- <h2>首页</h2> -->
		<Nav></Nav>
	</div>
</template>
<script>
import Animation from './animation.vue'
import Comic from './comic.vue'
import Nav from '../tabnav.vue'
export default {
	name: 'Index',
	data () {
		return {
			circleUrl: require('../../assets/02.jpg'),
			msgvalue:'',
			activeName: 'first'
		}
	},
	methods:{
		handleClick(tab,event){
			console.log(tab, event);
		}
	},
	components:{
		Animation,
		Comic,
		Nav
	}
}
</script>

<style scoped>
	@import url("index.css");
</style>
